<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>线宽引起的误差</title>
</head>
<body>
<p>另一种解决方法是通过画布缩放绘制。或css缩放</p>
<canvas width="600" height="600" style="background-color: #fafafa"></canvas>

<script>

    var canvas = document.getElementsByTagName('canvas')[0];
    var cxt = canvas.getContext('2d');

    cxt.font = '14px 宋体'
    cxt.lineWidth = 2;
    cxt.beginPath();
    cxt.moveTo(10,10)
    cxt.lineTo(100,10);
    cxt.closePath();
    cxt.stroke();
    cxt.fillText('2px，外边框也是2px，但因为线宽的一半在画布之外，被吃掉了，仅有1px可见',110,16);

    cxt.lineWidth = 1;
    cxt.strokeRect(0,0,canvas.width,canvas.height);//吃掉0.5px，1px已经是最小，采用颜色变浅来表示

    cxt.strokeRect(30,30,100,100);//产生0.5像素溢出，追加满1px,导致边框==2px
    cxt.fillText('边框==2px,且颜色变浅，模糊',50,65)

    cxt.strokeRect(150.5,150.5,100,100)//对齐线宽中线，边框===1px
    cxt.fillText('边框==1px,颜色正常',160,200)

    cxt.lineWidth = 2;
    cxt.strokeRect(300,300,100,100)
    cxt.fillText('正常的2px边框',305,350)

    cxt.lineWidth = 3;
    cxt.strokeRect(450,450,100,100)
    cxt.fillText('3px变4px，略微模糊',455,500)

    cxt.lineWidth = 4;
    cxt.strokeRect(300,450,100,100)
    cxt.fillText('正常的4px',305,500)


    cxt.lineWidth = 9;
    cxt.strokeRect(20,450,100,100)
    cxt.fillText('9px变10px，  只有内外边有一点点模糊',35,500)

    cxt.lineWidth = 10;
    cxt.strokeRect(20.5,300.5,100,100)
    cxt.fillText('正常10px',35,355)


</script>
</body>
</html>